<?php

/**
 * [simcool]
 *
 * @package simcool
 * @author shean
 * @version 2024-12
 * @link http://doubao.life
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

<head><?php $this->need('header.php'); ?>
    <style>
        .---container {
            column-gap: 0;
        }

        .---item {
            width: 100%;
            /* 假设内容块宽度为列宽 */
            break-inside: avoid;
            /* 防止内容块在列内被截断 */
        }

        /* mobile */
        @media (max-width:1024px) {
            .---container {
                column-count: 2;
            }

            .---item>.bg-image {
                height: 25vh;
            }
        }

        /* pc */
        @media (min-width:1024px) {
            .---container {
                column-count: 3;
            }

            .---item>.bg-image {
                height: 25vh;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="columns">
            <!-- cover pc-only -->
            <div class="column col-4 px-0 hide-sm">
                <?php $this->need('cover-today.php'); ?>
            </div>
            <!-- page -->
            <div class="column col-8 col-sm-12 px-0">
                <!-- menu -->
                <div class="container p-0">
                    <?php $this->need('menu.php'); ?>
                </div>
                <!-- cont -->
                <div class="container">
                    <div class="columns">
                        <!-- left -->
                        <div class="column col-3 col-sm-3 px-0">
                            <!-- cate-menu -->
                            <?php $this->need('cateMenu.php'); ?>
                        </div>
                        <!-- right -->
                        <div class="column col-9 col-sm-9 p-0">
                            <!-- page body -->
                            <div class="scroller-y" style="height: calc(100vh - 42px);">

                                <?php if (!$this->have()): ?>
                                    <div class="archive-item no-border">
                                        <div class="d-flex a-center j-center" style="height:calc(100vh - 160px);">
                                            <div>
                                                <div class="bg-image img-nodata" style="width:80px;height:80px;"></div>
                                                <div class="text-dark text-small text-center mt-2">暂无数据</div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php $slug = $this->getArchiveSlug(); ?>
                                <div class="d-none text-warning text-center text-tiny" style="margin:25px;">本栏目尚未开启评论</div>



                                <div class="bg-gray" style="padding:150px 0;">
                                    <div class="d-flex a-center j-center ">
                                        <div class="a-link text-bold text-primary" style="font-size:2.5rem;margin-right:10px;"><?php $this->category(); ?></div>
                                        <div class="mx-2">
                                            <div class="text-tiny">
                                                <div>是坚持，是过程，是一种爱好</div>
                                                <div>也是一切</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center mt-2 pt-2 text-gray text-small">欢迎浏览豆包的摄影作栏目</div>
                                </div>

                                <div class="block-space text-center text-small text-gray">tip: 点击标题进入详情，点击图片缩略图预览图片</div>


                                <?php while ($this->next()): ?>
                                    <div class="block-space">
                                        <div class="c-hand text-primary text-ellpsis text-large" style="margin-top: 50px;" onclick="location.href='<?php $this->permalink(); ?>';"><?php $this->title(); ?></div>
                                        <div class="text-gray text-small" style="margin-bottom:20px"><?php $this->date('Y-m-d'); ?></div>
                                        <div class="---container">
                                            <?php $itemlist = getCoverList($this); ?>
                                            <?php foreach ($itemlist as $key => $val): ?>
                                                <div class="c-hand ---item" onclick="imgClick('<?php echo ($val); ?>')">
                                                    <div class="bg-image" style="background-image:url('<?php echo ($val); ?>');"></div>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                                <div class=''>
                                    <?php $this->pageNav('P', 'N'); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php $this->need('footer.php'); ?>
    </div>
    <script>
        function imgClick(url) {
            let cv = document.querySelector('.window-cover')
            if (!cv) return
            cv.innerHTML = ''
            let img = new Image()
            img.src = url
            img.onclick = (e) => {
                document.querySelector('.window-cover').classList.remove('active')
            }
            cv.appendChild(img)
            cv.onclick = (e) => {
                e.target.classList.remove('active')
            }
            cv.classList.add('active')
        }
    </script>
</body>

</html>